<template>
  <div>
    <h2>手机号登录</h2>
    <a-form
      id="components-form-demo-normal-login"
      class="login-form"
      @submit="handleSubmit"
      style="padding-left: 10px"
    >
      <a-form-item>
        <a-input
          ref="phone"
          v-decorator="[
            'mobile',
            {
              rules: [
                {
                  required: true,
                  pattern: '^1[3456789]\\d{9}$',
                  message: '请正确输入您的手机号',
                },
              ],
            },
          ]"
          placeholder="请输入手机号"
        >
            <a-form-item>
                <a-input
                        v-model='phone'
                        v-decorator="[
          'mobile',
          { rules: [{ required: true,pattern: '^1[3456789]\\d{9}$', message: '请正确输入您的手机号' }] },
        ]"
                        placeholder="请输入手机号"
                >
                    <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
                </a-input>
            </a-form-item>

            <a-form-item style="margin-top: -20px;display: flex;">
                <a-input
                        v-model='code'
                        v-decorator="['code',{ rules: [{ required: true, message: '验证码有误' }] },]"
                        type="text"
                        placeholder="请输入验证码"
                        style="width: 45%;margin-right: 5px;margin-top: 16px;"
                >
                    <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
                </a-input>
                <a-button type="primary"
                          style="border-radius: 5px;width: 45%;height: 48px;float: right;right: 0;top:18px"
                          @click="indenCode" :disabled="flog">
                    获取验证码
                </a-button>
            </a-form-item>
            <a-button
                    type="primary"
                    block
                    style="margin-bottom: 10px;height: 50px;"
                    html-type="submit"
            >
                登录
            </a-button>
        </a-form>
    </div>
</template>

<script>
import { phoneCode, loginPhone } from "../api/api";

export default {
  name: "PhoneLogin",
  data() {
    return {
      phone: "",
      code: "",
      num: 60,
      timer: null,
      flog: false,
    };
  },
  created() {
    this.form = this.$form.createForm(this, { name: "normal_login" });
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      loginPhone(this.phone, this.code, false).then((res) => {
        // console.log(res);
        if (res.code === 0) {
          this.code = res.code;
          this.$message.success("登陆成功，欢迎回来");
          this.visible = false;
          this.$store.commit("changeLogin", { isLogin: true, data: res.data });
          this.$router.push("/mine");
        } else {
          this.$message.warning(res.msg);
          // this.$store.commit('changeLogin',{isLogin:true,userinfo:res.userInfo})
          // this.$store.state.isLogin=true
        }
      });
    },
    indenCode() {
      // console.log(this.phone);
      phoneCode(this.phone).then((res) => {
        // console.log(res);
        this.flog = true;
        clearInterval(this.timer);
        this.timer = setInterval(() => {
          this.num--;
          if (this.num <= 0) {
            this.msg = "重新获取验证码";
            clearInterval(this.timer);
            this.num = 60;
            this.flog = false;
          } else {
            this.msg = this.num + "秒重新获取";
          }
        }, 1000);
      });
    },
  },
};
</script>

<style scoped>
</style>